<!DOCTYPE html>
<html>
<head>
    <title>Particle Collision Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="particle-collision-canvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('particle-collision-canvas');
        const ctx = canvas.getContext('2d');

        // Function to draw the magnetic field symbol (circle with a cross)
        function drawBField(x, y, radius) {
            ctx.save();
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.moveTo(x - radius / Math.sqrt(2), y - radius / Math.sqrt(2));
            ctx.lineTo(x + radius / Math.sqrt(2), y + radius / Math.sqrt(2));
            ctx.stroke();
            ctx.moveTo(x + radius / Math.sqrt(2), y - radius / Math.sqrt(2));
            ctx.lineTo(x - radius / Math.sqrt(2), y + a / Math.sqrt(2));
            ctx.stroke();
            ctx.restore();
        }
        
        // Function to draw an arrowhead
        function drawArrowhead(toX, toY, angle, size) {
            ctx.save();
            ctx.fillStyle = 'black';
            ctx.translate(toX, toY);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.lineTo(-size, size / 2.5);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Global Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // --- Draw Magnetic Field ---
        const bRadius = 22;
        drawBField(100, 80, bRadius);
        drawBField(500, 80, bRadius);
        drawBField(100, 370, bRadius);
        drawBField(500, 370, bRadius);

        ctx.font = 'italic 28px serif';
        ctx.fillText('B', 40, 88);
        ctx.fillText('B', 530, 378);

        // --- Draw Initial Particles ---
        const interactionX = 300;
        const interactionY = 170;
        
        ctx.font = '24px serif';
        // K- particle
        ctx.beginPath();
        ctx.arc(interactionX, interactionY - 10, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('K', interactionX + 12, interactionY - 8);
        ctx.font = '20px serif';
        ctx.fillText('−', interactionX + 28, interactionY - 15);

        // p particle
        ctx.font = '24px serif';
        ctx.beginPath();
        ctx.arc(interactionX, interactionY + 10, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'italic 24px serif';
        ctx.fillText('p', interactionX - 5, interactionY + 40);

        // --- Draw Particle Tracks ---
        const startPoint = { x: interactionX, y: interactionY };

        // π+ track (curves left and up)
        const pi_ctrl = { x: 200, y: 150 };
        const pi_end = { x: 120, y: 280 };
        
        ctx.beginPath();
        ctx.moveTo(startPoint.x, startPoint.y);
        ctx.quadraticCurveTo(pi_ctrl.x, pi_ctrl.y, pi_end.x, pi_end.y);
        ctx.stroke();
        
        // Dot on pi+ track
        ctx.beginPath();
        ctx.arc(132, 270, 3.5, 0, 2*Math.PI);
        ctx.fill();

        // Arrow for pi+
        let angle_pi = Math.atan2(pi_end.y - pi_ctrl.y, pi_end.x - pi_ctrl.x);
        drawArrowhead(pi_end.x, pi_end.y, angle_pi, 15);
        
        // Label for pi+
        ctx.font = '24px serif';
        ctx.fillText('π', pi_end.x - 2, pi_end.y + 30);
        ctx.font = '20px serif';
        ctx.fillText('+', pi_end.x + 12, pi_end.y + 24);

        // x track (curves right and down)
        const x_ctrl = { x: 400, y: 220 };
        const x_end = { x: 480, y: 300 };
        
        ctx.beginPath();
        ctx.moveTo(startPoint.x, startPoint.y);
        ctx.quadraticCurveTo(x_ctrl.x, x_ctrl.y, x_end.x, x_end.y);
        ctx.stroke();

        // Arrow for x
        let angle_x = Math.atan2(x_end.y - x_ctrl.y, x_end.x - x_ctrl.x);
        drawArrowhead(x_end.x, x_end.y, angle_x, 15);

        // Label for x
        ctx.font = 'italic 24px serif';
        ctx.fillText('x', x_end.x, x_end.y + 30);

    </script>
</body>
</html>